<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/nav.css">
  <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
  <script src='../lib/bootstrap-3.3.5-dist/js/jquery-3.6.0.js'></script>
  <script src='../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js'></script>
  <script src='../javascript/nav.js'></script>
  <link rel="stylesheet" href="../css/font_sbdceyn3aud/iconfont.css">
  <link rel="stylesheet" href="../css/chtx.css">
</head>
<body>
  <!-- 导航 -->
  <div id="naviga">
    <div id='logo'>
      <img src="../image/logo.png" alt="">
    </div>
    <ul id="tushu" class="menu">
      <li>图书管理<span class="iconfont icon-xiala"></span></li>
      <li page-data='page1'>还书管理</li>
      <li page-data='page2'>借阅管理</li>
      <li page-data='page3'>新书入库</li>
      <li page-data='page4'>超期还书</li>
      <li page-data='page5'>销书管理</li>
      <li page-data='page6'>图书状态</li>
    </ul>
    <ul id="user" class="menu">
      <li>用户管理<span class="iconfont icon-xiala"></span></li>
      <li page-data='page7'>用户信息</li>
      <li page-data='page8'>黑名单用户</li>
      <li page-data='page9'>借阅记录</li>
      <li page-data='page10'>催还提醒</li>
    </ul>
  </div>
  <div id="header"></div>
  <div id="waimian" class="clear">
    <div id="contentall">
      <div id="jieyue">
      <p>催还提醒</p>
      </div>
      <div id="content">
      <div id="caozuo">
        <button id="btn1" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2"
        data-whatever="@mdo">一键提醒</button>
        <button id="btn1" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalf"
        data-whatever="@mdo">批量删除</button>
        <div id="caozuoyou"><input type="text" placeholder="输入关键词" id="wenben">
          <button id="btn2" onclick="cxk()">查询</button></div>
      </div>
      <!-- 表单 -->
      <table id="mytable">
      <thead>
        <tr>
          <th><input type="checkbox" id="top_cb"></th>
          <th>借阅卡号</th>
          <th>用户名</th>
          <th>身份证</th>
          <th>手机号</th>
          <th>借阅图书</th>
          <th>借阅日期</th>
          <th>距离还书时间</th>
          <th>应还日期</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
      </table>
            <div id="page_Div" class="clearfix">
              <div id="jyjl_page" class="clearfix"></div>
            </div>
      </div>
    </div>
  </div>


  <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">完成操作提示</h4>
        </div>
        <div class="modal-body clear">
            <div class="clear conteng_sc">
            <div class="gantanhao">已一键提醒还书</div>
            </div>
        </div>
        <div class="modal-footer fenge">
            <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
        </div>
        </div>
    </div>
    </div>


    <div class="modal fade" id="exampleModalf" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                  aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="exampleModalLabel">操作确认</h4>
          </div>
          <div class="modal-body clear">
              <div class="clear conteng_sc">
              <div class="gantanhao"><img id="fimg1" src="../image/感叹号.png" alt="">是否删除所有选中数据</div>
              </div>
          </div>
          <div class="modal-footer fenge">
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="ffscqr()">确认</button>
          </div>
          </div>
      </div>
      </div>
  


  <div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">操作确认</h4>
        </div>
        <div class="modal-body clear">
            <div class="clear conteng_sc">
            <div class="gantanhao"><img id="fimg1" src="../image/感叹号.png" alt="">删除后数据将全部消失，是否确认</div>
            </div>
        </div>
        <div class="modal-footer fenge">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="fscqr()">确认</button>
        </div>
        </div>
    </div>
    </div>
  

  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="exampleModalLabel">修改催还提醒</h4>
        </div>
        <div class="modal-body clear">
          <form>
            <div class="form-group">
              <label for="recipient-name" class="control-label">借阅卡号</label>
              <input type="text" class="form-control" id="fsjcu1" id="recipient-name">
            </div>
            <div class="form-group">
              <label for="message-text" class="control-label">用户名</label>
              <input type="text" class="form-control" id="fsjcu2" id="recipient-name">
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">身份证</label>
                <input type="text" class="form-control" id="fsjcu3" id="recipient-name">
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">手机号</label>
                <input type="text" class="form-control" id="fsjcu4" id="recipient-name">
              </div>
              <div class="form-group">
                <label for="recipient-name" class="control-label">借阅图书</label>
                <input type="text" class="form-control" id="fsjcu5" id="recipient-name">
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">借阅日期</label>
                <input type="text" class="form-control" id="fsjcu6" id="recipient-name">
              </div>
              <div class="form-group">
                <label for="recipient-name" class="control-label">距离归还时间</label>
                <input type="text" class="form-control" id="fsjcu7" id="recipient-name">
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">应还日期</label>
                <input type="text" class="form-control" id="fsjcu8" id="recipient-name">
              </div>
          </form>
        </div>
        <div class="modal-footer fenge">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="fbjqr()">确认</button>
        </div>
      </div>
    </div>
  </div>
  <script>
    // function cxk(){
    //   var wenben=document.getElementById("wenben").value

    //       for(k = 0 ; k < stuData.length ; k++){
    //         if(wenben==stuData[k].kahao){
    //           x=k
    //         }
    //       }
    //       $('#mytable tbody').showTable(data)(
    //             `<tr>
    //                 <td><input type="checkbox" name="ck" id=""></td>
    //                 <td>${data[x].kahao}</td>
    //                 <td>${data[x].yonghu}</td>
    //                 <td>${data[x].shenfen}</td>
    //                 <td>${data[x].shouji}</td>
    //                 <td>${data[x].jieyue}</td>
    //                 <td>${data[x].jieriqi}</td>
    //                 <td>${data[x].julishijian}</td>
    //                 <td>${data[x].huanriqi}</td>
    //                 <td>
    //                   <button type="button" class="wukuang" data-toggle="modal" data-target="#exampleModal"
    //                    data-whatever="@mdo" onclick='bianji(${i})' >编辑</button>
    //                   <span> | </span>  
    //                   <button type="button" class="wukuang" data-toggle="modal" data-target="#exampleModal1"
    //                   data-whatever="@mdo" onclick='shanchu(${i})'>删除</button>
    //                 </td>    
    //             </tr>`
    //         )
    // }
        

let h = $(window).height()
    $('#naviga').css({
      'height': h + 'px',
    })

    $('.menu>li:first-child').on('click', function () {
      pullDown($(this))
    })
    $('.menu>li:first-child').siblings().on('click', function () {
      jumpPage($(this))
    })

    const stuData=[
      {kahao:20212892,yonghu:'叶小刀',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212845,yonghu:'分公司',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212877,yonghu:'你还敢',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212866,yonghu:'如果不',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212879,yonghu:'儿童和',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212853,yonghu:'自行车',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212824,yonghu:'于人间',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212820,yonghu:'做宣传',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212852,yonghu:'规划局',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212899,yonghu:'儿童还',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212878,yonghu:'搞不好',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212822,yonghu:'不耐烦',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212855,yonghu:'欧普哦',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212864,yonghu:'离开给',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212878,yonghu:'灰姑娘',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212894,yonghu:'就应该',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212848,yonghu:'法国人',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212811,yonghu:'科技局',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212812,yonghu:'开户行',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212813,yonghu:'阿斯顿',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212814,yonghu:'体育馆',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212851,yonghu:'豆腐干',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212816,yonghu:'种方法',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212814,yonghu:'科技部',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212818,yonghu:'没空了',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212819,yonghu:'场不诉',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212820,yonghu:'的风格',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212892,yonghu:'或服务',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212857,yonghu:'大大王',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212867,yonghu:'士大夫',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212868,yonghu:'梵蒂冈',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212766,yonghu:'梵蒂发',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212583,yonghu:'二热尔',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212222,yonghu:'割耳朵',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212724,yonghu:'如歌如',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212777,yonghu:'的人格',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212475,yonghu:'人工费',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212453,yonghu:'若干发',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
      {kahao:20212159,yonghu:'可以用',shenfen:'513027111102111546',shouji:'19982517763',jieyue:'《红楼梦》',jieriqi:2021-10-10,julishijian:'2',huanriqi:2021-10-10},
    ]
    let numa=10
    let numb
    let numc
    let max_page
    let pageData = stuData
    let dangqianye = 1

    var flag = true;
            $("#top_cb").click(function() {
                var cb = $("input[type=checkbox]");
                for(var i = 0; i < cb.length; i++) {
                    cb[i].checked = flag;
                }
                flag = !flag;
            })

            function ffscqr(){
                var ck=$("input:checked[name='ck']")
                for(var i=0;i<ck.length;i++){
                   ck[i].parentNode.parentNode.remove()
                   for(var j=0;j<pageData.length;j++){
                     if(pageData[j].kahao==ck.eq(i).parent().next().text()){
                      pageData.splice(j,1)
                      show(dangqianye)
                   }
                   }
                }
            }   
                  
    function showTable(data) {
        $('#mytable tbody').html('')
        for (let i = 0 ; i < data.length ; i++) {
            $('#mytable tbody').append (
                `<tr>
                    <td><input type="checkbox" name="ck" id=""></td>
                    <td>${data[i].kahao}</td>
                    <td>${data[i].yonghu}</td>
                    <td>${data[i].shenfen}</td>
                    <td>${data[i].shouji}</td>
                    <td>${data[i].jieyue}</td>
                    <td>${data[i].jieriqi}</td>
                    <td>${data[i].julishijian}</td>
                    <td>${data[i].huanriqi}</td>
                    <td>
                      <button type="button" class="wukuang" data-toggle="modal" data-target="#exampleModal"
                       data-whatever="@mdo" onclick='bianji(${i})' >编辑</button>
                      <span> | </span>  
                      <button type="button" class="wukuang" data-toggle="modal" data-target="#exampleModal1"
                      data-whatever="@mdo" onclick='shanchu(${i})'>删除</button>
                    </td>    
                </tr>`
            )
        }
    }
    function fpage_a(){
      numa=10
      show(1)
    }
    function fpage_b(){
      numa=8
      show(1)
    }
    function fpage_c(){
      numa=5
      show(1)
    }
    function fenye(num,data) {
        let qishi= (num - 1) * numa
        let page_data = data.slice(qishi , qishi + numa)
        dangqianye = num
        pageStyle(num)
        showTable(page_data)
    }
    function pageStyle(num) {
        $('.fyema_all').css({'background': 'white','color':'#666666'})
        $('.fyema_all').eq(num).css({'background':'rgb(64,158,255)','color':'white'})
    }
    function showPage(data) {
        $('#jyjl_page').html('')
        max_page = Math.ceil(data.length / numa)
        $('#jyjl_page').append(`<div class='fyema_all' onclick='page_pre()'> < </div>`)
        for (let i = 1 ; i <= max_page ; i++) {
            $('#jyjl_page').append(`<div class='fyema_all'>${i}</div>`)
        }
        $('#jyjl_page').append(
            `<div class='fyema_all' onclick='page_next()'> > </div>
            <div class='fyema_all' id="fbjc" onclick='fpage_c()'> 5条/页 </div>
            <div class='fyema_all' id="fbjb" onclick='fpage_b()'> 8条/页 </div>
            <div class='fyema_all' id="fbja" onclick='fpage_a()'> 10条/页 </div>`
        )
    }

    $('#jyjl_page').on('click','.fyema_all',function(e) {
      dangqianye= parseInt($(this).text())
        fenye(dangqianye , pageData)
    })
    function show(num) {
        fenye(num ,pageData)
        showPage(pageData)
        pageStyle(num)
    }
    function page_pre() {
        if (dangqianye > 1) {
          dangqianye--
            show(dangqianye)
            return
        } 
        show(dangqianye)
    }
    function page_next() {
        if (dangqianye < max_page) {
          dangqianye++
            show(dangqianye)
            return
        } 
        show(dangqianye)
    }
    show(1)
    $('tbody').on('click','.btn btn-primary',function(){
      let obj=JSON.parse($(this).attr('data-item'))
    })
    $('#mytable tbody').on('click','.btn btn-primary',function(){
      $('#mytable tbody').closest('tr').remove();
    })
    

function shanchu(num) {
    numb = num + (dangqianye - 1) * numa
}
function fscqr() {
    pageData.splice(numb,1)
    show(dangqianye)
}

function bianji(num) {
    numc = num + (dangqianye - 1) * numa
    let numd = pageData[numc]
    let kahao = document.getElementById('fsjcu1')
    let yonghu = document.getElementById('fsjcu2')
    let shenfen = document.getElementById('fsjcu3')
    let shouji = document.getElementById('fsjcu4')
    let jieyue = document.getElementById('fsjcu5')
    let jieriqi = document.getElementById('fsjcu6')
    let julishijian = document.getElementById('fsjcu7')
    let huanriqi = document.getElementById('fsjcu8')
    kahao.value = numd.kahao
    yonghu.value = numd.yonghu
    shenfen.value = numd.shenfen
    shouji.value = numd.shouji
    jieyue.value = numd.jieyue
    jieriqi.value = numd.jieriqi
    julishijian.value = numd.julishijian
    huanriqi.value = numd.huanriqi
}
function fbjqr() {
    let kahao = document.getElementById('fsjcu1').value
    let yonghu = document.getElementById('fsjcu2').value
    let shenfen = document.getElementById('fsjcu3').value
    let shouji = document.getElementById('fsjcu4').value
    let jieyue = document.getElementById('fsjcu5').value
    let jieriqi = document.getElementById('fsjcu6').value
    let julishijian = document.getElementById('fsjcu7').value
    let huanriqi = document.getElementById('fsjcu8').value
    let new_data = {kahao,yonghu,shenfen,shouji,jieyue,jieriqi,julishijian,huanriqi}
    pageData.splice(numc,1,new_data)
    show(dangqianye)
}


  </script>
</body>
</html>